@font-face {
  font-family: 'color-emoji';
  src: local('Apple Color Emoji'),
    local('Segoe UI Emoji'),
    local('Segoe UI Symbol'),
    local('Noto Color Emoji');
  // from: https://github.com/hidehalo/emoji/issues/3
  unicode-range: U+0080-02AF, U+0300-03FF, U+0600-06FF, U+0C00-0C7F, U+1DC0-1DFF, U+1E00-1EFF, U+2000-209F, U+20D0-214F, U+2190-23FF, U+2460-25FF, U+2600-27EF, U+2900-29FF, U+2B00-2BFF, U+2C60-2C7F, U+2E00-2E7F, U+3000-303F, U+A490-A4CF, U+E000-F8FF, U+FE00-FE0F, U+FE30-FE4F, U+1F000-1F02F, U+1F0A0-1F0FF, U+1F100-1F64F, U+1F680-1F6FF, U+1F910-1F96B, U+1F980-1F9E0;
}

@font-face {
  font-family: 'Varela Round';
  src: url('assets/font/VarelaRound-Regular.ttf');
}

/************************************** BODY STYLES **************************************/
body {
  font-size: 14px;
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 1.5;
  overflow-y: auto;
  -webkit-font-smoothing: auto;
  background-color: #fff;
}

body,
input,
textarea,
.MuiMenuItem-root {
  font-family: 'color-emoji',
    Nunito Sans, PingFang SC, Hiragino Sans GB, Heiti SC,
    Source Han Sans SC, Source Han Sans, WenQuanYi Micro Hei,
    Microsoft YaHei UI, Microsoft YaHei, sans-serif;
}

::selection {
  background-color: #777;
  color: #eee;
}

/************************************** BUTTON STYLES **************************************/
div,
button {
  outline: none !important;
}

/************************************** ANCHOR STYLES **************************************/
a {
  outline: none !important;
}

/************************************** OL, UL STYLES **************************************/
ol {
  list-style-type: decimal;
}

ul {
  list-style-type: disc;
}

/************************************** SVG STYLES **************************************/
// .MuiSvgIcon-root:not(.MuiSelect-icon) {
//   font-size: inherit !important;
// }

/************************************** TAB STYLES **************************************/
.MuiTab-textColorPrimary {
  &.Mui-selected {
    color: #96c02d !important;
  }
}

.MuiTab-textColorInherit {
  color: #888888 !important;
}

.MuiTab-textColorInherit.Mui-selected {
  color: #000 !important;
}

.MuiTab-root {
  overflow: visible !important;
}

/************************************** INPUT STYLES **************************************/
.MuiTextField-root {
  div::after {
    border-bottom: #888;

    &:hover {
      border-bottom: #888;
    }
  }
}

.MuiTextField-root.rounded fieldset {
  border-radius: 100px;
}

.MuiFormHelperText-contained {
  margin-right: 0 !important;
  color: #afafaf !important;
}

.MuiCheckbox-colorPrimary {
  color: #999 !important;

  &.Mui-checked {
    color: #000 !important;
  }
}

/************************************** MODAL STYLES **************************************/
.MuiDialog-paperWidthSm {
  max-width: 720px !important;
}

/************************************** MODAL STYLES **************************************/
.MuiPaper-rounded {
  // border-radius: 12px !important;
}

/************************************** SWITCH STYLES **************************************/
.MuiSwitch-colorPrimary.Mui-checked {

  color: rgb(59 130 246) !important;

  &+.MuiSwitch-track {
    background-color: #9ec0f9 !important;
  }
}

.MuiSwitch-thumb {
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 80%), 0px 1px 1px 0px rgb(0 0 0 / 80%), 0px 1px 3px 0px rgb(0 0 0 / 80%) !important;
}

/************************************** TOOLTIP STYLES **************************************/
.MuiTooltip-tooltip {
  font-size: 12px !important;
  font-family: inherit !important;
}

.no-style .MuiTooltip-tooltip {
  background: none;
  padding: 0;
  margin: 0;
}

/************************************** TAB HIGHLIGHT STYLES **************************************/
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

/************************************** SCROLL BAR STYLES **************************************/
.overflow-y-auto,
body {
  overflow-y: auto;
}

/************************************** MENU **************************************/
.MuiMenuItem-root {
  // font-size: 14px !important;
  min-height: auto;
}

/************************************** TABLE **************************************/
// .MuiPaper-elevation1 {
//   box-shadow: none !important;
// }

.MuiTableCell-root {
  border: none !important;

  .MuiCheckbox-root {
    padding: 0 !important;
  }
}

.MuiTableBody-root .MuiTableRow-root.active-hover:hover {
  background-color: #E0E7FF !important;
}

.MuiTableCell-body {
  color: #4a4a4a !important;
}

.MuiTableRow-head {
  background-color: #4a4a4a !important;
  height: 30px !important;
}
.MuiTableRow-head .MuiTableCell-head {
  color: white !important;
  font-size: 14px !important;
}
.MuiTableBody-root .MuiTableRow-root {
  background-color: white !important;
}

.MuiTableCell-root {
  padding: 15px 16px !important;
}

.MuiTableCell-head {
  padding: 6px 16px !important;
  font-size: 12px !important;
}

/************************************** BADGE STYLES **************************************/
// .MuiBadge-badge {
//   color: #fff;
//   background-color: #7f9cf5;
// }

/************************************** MARKDOWN STYLES **************************************/
.markdown {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 16px;
    padding: 8px 0;
    margin-bottom: 0;
  }

  p {
    margin: 0;
    padding: 0;
  }

  img {
    max-width: 50%;
  }
}
